<!--
 * Description: 表格单元格的封装
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/06/3 10:34
-->

<template>
  <td ref="td">
    <div ref="base-cell" class="base-cell" :style="customStyle1" :title="$parent.item[prop]">
      <div v-if="isDefaultSlot" class="slot-wrap" :style="customStyle2">
        <slot :$index="$parent.$index" :row="$parent.item" />
      </div>
      <div v-else class="slot-wrap" :style="customStyle2">
        {{ $parent.item[prop] }}
      </div>
    </div>
  </td>
</template>
<script>
export default {
  name: 'BaseCell',
  props: {
    width: {
      default: '150',
      type: String
    },
    height: {
      default: '40',
      type: String
    },
    align: {
      default: 'center',
      type: String
    },
    prop: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      item: null
    }
  },
  computed: {
    customStyle1() {
      let background = ''
      if (this.$parent.$parent.$parent.isCompare) {
        background = this.$parent.item.isRelateRow ? '#cee6ff' : ''
      }
      return {
        height: Number(this.$parent.$parent.$parent.itemHeight) + 'px',
        background: background
      }
    },
    customStyle2() {
      return {
        textAlign: this.align,
        lineHeight: Number(this.$parent.$parent.$parent.itemHeight) + 'px'
      }
    },
    isDefaultSlot() {
      return !this.prop
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs['base-cell'].style.width = this.width + 'px'
    })
  },
  updated() {
    this.init = true
    if (this.init) {
      this.$nextTick(() => {
        const tdWidth = this.$refs['td'].clientWidth
        if (Number(tdWidth) > Number(this.width)) {
          this.$refs['base-cell'].style.width = tdWidth + 'px'
        } else {
          this.$refs['base-cell'].style.width = this.width + 'px'
        }
      })
    }
  }
}
</script>
<style scoped>
td {
  border: none;
  padding: 0px;
}
.base-cell {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  position: relative;
}
.slot-wrap {
  width: 100%;
  height: 100%;
  padding: 0px 10px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
